<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jessica demo</title>
    <script src="./jessibuca-pro-talk.js"></script>
    <style>
        .root {
            display: flex;
            place-content: center;
            margin-top: 3rem;
        }

        .container-shell {
            backdrop-filter: blur(5px);
            background: hsla(0, 0%, 50%, 0.5);
            padding: 30px 4px 10px 4px;
            /* border: 2px solid black; */
            width: auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 10px 20px;
        }

        .container-shell:before {
            content: "jessibuca demo player";
            position: absolute;
            color: darkgray;
            top: 4px;
            left: 10px;
            text-shadow: 1px 1px black;
        }

        #container {
            background: rgba(13, 14, 27, 0.7);
            width: 640px;
            height: 398px;
        }

        .input {
            display: flex;
            margin-top: 10px;
            color: white;
            place-content: stretch;
        }

        .input2 {
            bottom: 0px;
        }

        .input input {
            flex: auto;
        }

        .err {
            position: absolute;
            top: 40px;
            left: 10px;
            color: red;
        }

        .option {
            position: absolute;
            top: 4px;
            right: 10px;
            display: flex;
            place-content: center;
            font-size: 12px;
        }

        .option span {
            color: white;
        }

        .page {
            background: url('./bg.jpg');
            background-repeat: no-repeat;
            background-position: top;
        }

        .span-row {
            display: inline-block;
            margin-right: 10px;
        }

        @media (max-width: 720px) {
            #container {
                width: 90vw;
                height: 52.7vw;
            }
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <input type="text" value="ws://120.35.11.49:50104/" id="talkUrl">
        </div>
        <div class="input">
            <span class="span-row">
                    编码格式
                <select id="talkEncType">
                    <option value="g711a" selected>g711a</option>
                    <option value="g711u">g711u</option>
                </select>
                </span>
            <span class="span-row">
                    封装格式
                    <select id="talkPacketType">
                        <option value="rtp" selected>rtp</option>
                    </select>
                </span>
            <span class="span-row">
                    rtpSsrc
                    <input style="width: 80px" type="text" value="0" id="talkRtpSsrc">
                </span>
            <span class="span-row">
                 <input
                     id="testMicrphone"
                     type="checkbox"
                 /><span>测试麦克风(不会触发ws连接)</span>
            </span>
        </div>
        <div class="input">
             <span class="span-row">
                    采样率
                    <select id="talkSampleRate">
                        <option value="16000" selected>16000</option>
                        <option value="8000">8000</option>
                    </select>
                    Hz
                </span>
            <span class="span-row">
                     采样精度
                    <select id="talkSampleBitsWidth">
                        <option value="32">32</option>
                        <option value="16" selected>16</option>
                        <option value="8">8</option>
                    </select>
                    位
                </span>
           <span class="span-row">
                    engine
                    <select id="talkEngine">
                        <option value="worklet" selected>worklet</option>
                        <option value="script">script</option>
                    </select>
                </span>
        </div>
        <div class="input">
            <button onclick="startTalk()">开始对讲</button>
            <button onclick="stopTalk()">停止对讲</button>
            <button onclick="saveTalk()">下载rtp文件</button>
            <span>
                 设置声音<input
                type="range"
                min="0"
                max="100"
                step="1"
                value="100"
                id="talkVolume"
                onchange="talkSetVolume()"
            />
            </span>
            <button onclick="talkGetVolume()">获取声音</button>
        </div>

        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
        </div>
    </div>
</div>

<script>
    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');


    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibucaTalk = null;

    function create() {
        jessibucaTalk = new JessibucaProTalk();

        $destroy.style.display = 'none';
    }


    create();


    $destroy.addEventListener('click', function () {
        if (jessibucaTalk) {
            jessibucaTalk.destroy();
        }
        create();
    })

    function startTalk() {
        const talkUrl = document.getElementById('talkUrl').value;
        const talkEncType = document.getElementById('talkEncType').value;
        const talkPacketType = document.getElementById('talkPacketType').value;
        const talkSampleRate = document.getElementById('talkSampleRate').value;
        const talkSampleBitsWidth = document.getElementById('talkSampleBitsWidth').value;
        const talkRtpSsrc = document.getElementById('talkRtpSsrc').value;
        const talkTestMicrphone = document.getElementById('testMicrphone').checked;
        if (jessibucaTalk && talkUrl) {
            jessibucaTalk.startTalk(talkUrl, {
                encType: talkEncType,
                packetType: talkPacketType,
                sampleBitsWidth: talkSampleBitsWidth,
                sampleRate: talkSampleRate,
                debug: true,
                rtpSsrc: talkRtpSsrc,
                testMicrophone: talkTestMicrphone === true || talkTestMicrphone === 'true',
            }).then(() => {

            }).catch((e) => {
                console.error('start talk error', e);
            })
        } else {
            if (!jessibucaTalk) {
                console.log('jessibucaTalk is not ready');
            }
            if (!talkUrl) {
                console.log('talkUrl is empty');
            }
        }
    }

    function stopTalk() {
        if (jessibucaTalk) {
            jessibucaTalk.stopTalk().then(() => {

            }).catch((e) => {
                console.error('stop talk error', e);
            });
        } else {
            console.log('jessibucaTalk is not ready');
        }
    }

    function saveTalk() {
        if (jessibucaTalk) {
            jessibucaTalk.downloadTempRtpFile().then(() => {
                console.log('download success');
            }).catch((e) => {
                console.error('save talk error', e);
            });
        } else {
            console.log('jessibucaTalk is not ready');
        }
    }

    function talkSetVolume() {
        var volume = document.getElementById('talkVolume').value;
        console.log('talkSetVolume', volume);
        if (jessibucaTalk) {
            jessibucaTalk.setTalkVolume(volume).then(() => {
                console.log('set talk volume success');
            }).catch((e) => {
                console.error('set talk volume error', e);
            });
        } else {
            console.log('jessibucaTalk is not ready');
        }
    }

    function talkGetVolume() {
        if (jessibucaTalk) {
            jessibucaTalk.getTalkVolume().then((volume) => {
                console.log('talk volume', volume);
            }).catch((e) => {
                console.error('get talk volume error', e);
            });
        } else {
            console.log('jessibucaTalk is not ready');
        }
    }
</script>

</body>
</html>
